<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- 상단 영역 -->
<div class="ddp-ui-divide">
  <div class="ddp-ui-down-title2 ddp-flex" [attr.data-gl-dragsource]="isDraggable ? 'enable' : 'disable'"
       [class.ddp-selected]="isNewFilter"
       [ngStyle]="!isDashboardMode ? { cursor : 'default' } : {}">

    <!-- 필드 이름 표시 영역 -->
    <div *ngIf="filter" class="ddp-itemtype-title">
      <div class="ddp-data-itemtype ddp-type">
        <span class="ddp-icon-box">
          <em *ngIf="field" class="{{getDimensionTypeIconClass(field)}}" ></em>
          <em class="ddp-icon-use3" *ngIf="isWidgetInLayout"></em>
        </span>
        <span class="ddp-txt-itemtype">
          <span class="ddp-data-name">{{filter.field}}</span>
          <span *ngIf="!parentWidget" class="ddp-data-sub">{{dataSource?.name}}</span>
          <span *ngIf="!!parentWidget" class="ddp-data-sub">{{dataSource?.name + ' - ' + parentWidget?.configuration.filter.field}}</span>
          <span *ngIf="!isBoardFilter" class="ddp-txt-chartname ">
              {{ 'msg.board.ui.filter.used-this-chart' | translate }}
          </span>
        </span>
      </div>
    </div>
    <!-- // 필드 이름 표시 영역 -->
    <!-- 필터 속성 표시 영역 -->
    <div *ngIf="filter" class="ddp-flex-button">

      <em class="ddp-icon-global-s" *ngIf="isBoardFilter"></em>

      <!-- 추천/필수 필터 경우 -->
      <div *ngIf="filter.ui.filteringSeq > 0" class="ddp-wrap-datarecommend">
        {{filter.ui.filteringSeq}} <em class="ddp-icon-recommend-s2"></em>
      </div>
      <!-- // 추천/필수 필터 경우 -->

      <!-- 더보기 버튼 영역 -->
      <div class="ddp-wrap-morebutton ddp-hover-tooltip"
           [class.ddp-selected]="isShowDetailMenu"
           (click)="toggleDetailMenu()" (clickOutside)="isShowDetailMenu = false">
        <em class="ddp-icon-more"></em>
        <div class="ddp-ui-tooltip-info ddp-down">
          <em class="ddp-icon-view-top"></em> {{"msg.comm.ui.more" | translate}}
        </div>
        <!-- 더보기 팝업 -->
        <div class="ddp-wrap-popup2 ddp-types">
          <!-- 기능 버튼 목록 -->
          <ul class="ddp-list-popup">
            <li *ngIf="!isDashboardMode && isBoardFilter && isChangeable">
              <a href="javascript:" (click)="changeGlobalToChart(filter)">
                <em class="ddp-icon-drop-global2"></em>
                {{'msg.board.filter.ui.turn.chart' | translate}}
              </a>
            </li>
            <li *ngIf="false" >
              <!--<li *ngIf="!isDashboardMode && !isBoardFilter && isChangeable">-->
              <a href="javascript:" (click)="changeChartToGlobal(filter)">
                <em class="ddp-icon-drop-global"></em>
                {{'msg.board.filter.ui.turn.global' | translate}}
              </a>
            </li>
            <li>
              <a href="javascript:" (click)="resetFilter()">
                <em class="ddp-icon-drop-refresh"></em>
                {{'msg.board.filter.ui.reset' | translate}}
              </a>
            </li>
            <li *ngIf="isEditable">
              <a href="javascript:" (click)="openUpdateFilterPopup(originalFilter)">
                <em class="ddp-icon-drop-editmodify"></em>
                {{'msg.board.filter.ui.edit' | translate}}
              </a>
            </li>
            <li *ngIf="isDeletable">
              <a href="javascript:" (click)="deleteFilter(filter)">
                <em class="ddp-icon-drop-editdel3"></em>
                {{'msg.board.filter.ui.remove' | translate}}
              </a>
            </li>
          </ul>
          <!-- // 기능 버튼 목록 -->
          <div class="ddp-wrap-layer">
            <!-- toggle -->
            <div class="ddp-area-toggle">
              <ul class="ddp-list-buttons ddp-clear">
                <li (click)="setAbsolute()" [class.ddp-selected]="!isRelativeType" class="ddp-col-6" >
                  Absolute
                </li>
                <li (click)="setRelative()" [class.ddp-selected]="isRelativeType" class="ddp-col-6" >
                  Relative
                </li>
              </ul>
            </div>
            <!-- //toggle -->
            <ul class="ddp-list-layer-option type-option type-sub-down">
              <li *ngIf="!isRelativeType">
                <a href="javascript:">
                  <div class="ddp-data-result ddp-type">
                    {{filter.timeUnit?.toString()}} <em class="ddp-icon-view"></em>
                  </div>
                  <span class="ddp-txt-data" title="Unit">
                    <em class="ddp-icon-drop-unit"></em>Unit
                  </span>
                </a>
                <div class="ddp-ui-layer-sub">
                  <span class="ddp-label ddp-padt0">Continuous type</span>
                  <ul class="ddp-list-popup">
                    <li *ngFor="let unit of dpContinuousList"
                        (click)="selectTimeUnit( false, unit.toUpperCase() )"
                        [class.ddp-selected]="isSelectedContinuous(unit)">
                      <a href="javascript:">
                        {{unit}} <em class="ddp-icon-check"></em>
                      </a>
                    </li>
                  </ul>
                  <div class="ddp-wrap-layer">
                    <span class="ddp-label">Discontinuous type</span>
                    <ul class="ddp-list-popup">
                      <li *ngFor="let byUnit of dpDiscontinuousList"
                          (click)="selectTimeUnit( true, byUnit['unit'], byUnit['byUnit'] )"
                          [class.ddp-selected]="isSelectedDiscontinuous(byUnit)">
                        <a href="javascript:">
                          {{ byUnit['name'] }} <em class="ddp-icon-check"></em>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li *ngIf="!isRelativeType">
                <a href="javascript:">
                  <div class="ddp-data-result ddp-type">
                    {{ isListType ? 'List' : ( isRangeType ? 'Range' : 'Single') }} <em class="ddp-icon-view "></em>
                  </div>
                  <span class="ddp-txt-data" title="Selection"><em class="ddp-icon-drop-select"></em>Selection</span>
                </a>
                <div class="ddp-ui-layer-sub">
                  <ul class="ddp-list-popup">
                    <li (click)="setTimeListFilter()" [class.ddp-selected]="isListType">
                      <a href="javascript:"> List <em class="ddp-icon-check"></em> </a>
                    </li>
                    <li (click)="setTimeRangeFilter()" [class.ddp-selected]="isRangeType">
                      <a href="javascript:"> Range <em class="ddp-icon-check"></em> </a>
                    </li>
                    <li (click)="setTimeSingleFilter()" [class.ddp-selected] = "isSingleType">
                      <a href="javascript:"> Single <em class="ddp-icon-check"></em></a>
                    </li>
                  </ul>
                </div>
              </li>
              <li *ngIf="isListType">
                <a href="javascript:">
                  <div class="ddp-data-result ddp-type">
                    {{ isFrequencyAsc ? ('msg.comm.ui.soring.frequency.asc' | translate) : ('msg.comm.ui.soring.alphnumeric.asc' | translate) }}
                    <em class="ddp-icon-view"></em>
                  </div>
                  <span class="ddp-txt-data" title="Selection"><em class="ddp-icon-drop-sort"></em>Sort by</span>
                </a>
                <div class="ddp-ui-layer-sub">
                  <ul class="ddp-list-popup">
                    <li (click)="sortList('FREQUENCY','ASC');" [class.ddp-selected]="isFrequencyAsc">
                      <a href="javascript:">
                        {{'msg.comm.ui.soring.frequency.asc' | translate}} <em class="ddp-icon-check"></em>
                      </a>
                    </li>
                    <li (click)="sortList('ALPHNUMERIC','ASC');" [class.ddp-selected]="isAlphnumericAsc">
                      <a href="javascript:">
                        {{'msg.comm.ui.soring.alphnumeric.asc' | translate}} <em class="ddp-icon-check"></em>
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- // 더보기 팝업 -->
      </div>
      <!-- // 더보기 버튼 영역 -->
    </div>
    <!-- // 필터 속성 표시 영역 -->
  </div>
</div>
<!-- // 상단 영역 -->

<!-- 내용 영역 -->
<div *ngIf="isShowFilter" class="ddp-contents-divide" >
  <!-- 연속 형식 - None Granularity -->
  <div *ngIf="!isDiscontinuousFilter && isContinuousByAll" class="ddp-ui-divide">
    <!-- 탭별 내용 영역 -->
    <div class="ddp-wrap-toggle-contents">
      <!-- 전체 기간 선택 탭 영역 -->
      <div *ngIf="isAllType" class="ddp-ui-toggle-contents">
        <span class="ddp-txt-preview">(No time filtering)</span>
      </div>
      <!-- // 전체 기간 선택 탭 영역 -->
      <!-- 상대적인 기간 선택 탭 영역 -->
      <div *ngIf="isRelativeType" class="ddp-ui-toggle-contents">
        <app-time-relative-filter
          [mode]="'PANEL'" [filter]="filter" [dashboard]="dashboard"
          (changeEvent)="changeFilterEvent($event)">
        </app-time-relative-filter>
      </div>
      <!-- // 상대적인 기간 선택 탭 영역 -->
      <!-- 특정 기간 선택 탭 영역 -->
      <div *ngIf="isRangeType" class="ddp-ui-toggle-contents">
        <app-time-range-filter
          [mode]="'PANEL'" [filter]="filter" [dashboard]="dashboard"
          (changeEvent)="changeFilterEvent($event)">
        </app-time-range-filter>
      </div>
      <!-- // 특정 기간 선택 탭 영역 -->
    </div>
    <!-- // 탭별 내용 영역 -->
  </div>
  <!-- // 연속 형식 - None Granularity -->
  <!-- 연속 형식 - Granularity -->
  <div *ngIf="!isDiscontinuousFilter && !isContinuousByAll" class="ddp-ui-divide" >
    <!-- 탭별 내용 영역 -->
    <div class="ddp-wrap-toggle-contents">
      <!-- 전체 기간 선택 탭 영역 -->
      <div *ngIf="isListType" class="ddp-ui-toggle-contents">
        <app-time-list-filter
          [mode]="'PANEL'" [filter]="filter"
          [dashboard]="dashboard" [field]="field"
          (change)="changeFilterEvent($event)">
        </app-time-list-filter>
      </div>
      <!-- // 전체 기간 선택 탭 영역 -->
      <!-- 특정 기간 선택 탭 영역 -->
      <div *ngIf="isRangeType" class="ddp-ui-toggle-contents">
        <app-time-range-filter
          [mode]="'PANEL'" [filter]="filter" [dashboard]="dashboard"
          (changeEvent)="changeFilterEvent($event)">
        </app-time-range-filter>
      </div>
      <!-- // 특정 기간 선택 탭 영역 -->
      <!-- 특정 날짜 선택 탭 영역 -->
      <div *ngIf="isSingleType" class="ddp-ui-toggle-contents">
        <app-time-date-filter
          [mode]="'PANEL'" [filter]="filter" [dashboard]="dashboard"
          (changeEvent)="changeFilterEvent($event)">
        </app-time-date-filter>
      </div>
      <!-- // 특정 날짜 선택 탭 영역 -->
    </div>
    <!-- // 탭별 내용 영역 -->
  </div>
  <!-- // 연속 형식 - Granularity -->
  <!-- 불연속 형식 -->
  <div *ngIf="isDiscontinuousFilter" class="ddp-ui-divide" >
    <!-- //summary -->
    <app-time-list-filter
      [mode]="'PANEL'" [filter]="filter"
      [dashboard]="dashboard" [field]="field"
      (change)="changeFilterEvent($event)">
    </app-time-list-filter>
  </div>
  <!-- // 불연속 형식 -->
</div>
<!-- // 내용 영역 -->
